<template>
  <!-- <div>详情页{{this.productId}}</div> -->
  <div class="detail">
    <!-- // 导航 -->
    <detail-nav-bar ref="nav" @titleClick="titleClick"></detail-nav-bar>
    <scroll class="scroll" ref="scroll" @scroll="contentScroll" :probeType="3">
      <detail-swiper :images="images"></detail-swiper>
      <detail-base-info :goods="goods"></detail-base-info>
      <detail-shop-info :shop="shop"></detail-shop-info>
      <detail-option ref="params" />
      <detail-rate ref="comment" />
      <detail-recommend ref="recommend" />
    </scroll>
    <detail-bottom-bar></detail-bottom-bar>
  </div>
</template>

<script>
  import DetailNavBar from "views/detail/childComps/DetailNavBar"
  import DetailSwiper from "views/detail/childComps/DetailSwiper"
  import DetailBaseInfo from "views/detail/childComps/DetailBaseInfo"
  import DetailShopInfo from "views/detail/childComps/DetailShopInfo"
  import DetailOption from "views/detail/childComps/DetailOption"
  import DetailRate from "views/detail/childComps/DetailRate"
  import DetailRecommend from "views/detail/childComps/DetailRecommend"
  import DetailBottomBar from "views/detail/childComps/DetailBottomBar"

  import Scroll from "components/common/scroll/Scroll"

  import {
    getDetail,
    Goods,
    Shop
  } from "network/detail/detail"

  export default {
    name: "Detail",
    data() {
      return {
        merchantId: null,
        productId: null,
        images: {
          type: Array,
          default () {
            return []
          }
        },
        goods: Object,
        shop: Object,
        themeTopYs: [],
        currentIndex: 0,
        message:"hello_world",
      }
    },
    components: {
      DetailNavBar,
      DetailSwiper,
      DetailBaseInfo,
      DetailShopInfo,
      Scroll,
      DetailOption,
      DetailRate,
      DetailRecommend,
      DetailBottomBar
    },
    created() {
      this.merchantId = this.$route.params.merchantId;
      this.productId = this.$route.params.productId;

      this.getDetail();
    },
    updated() {
      this.getThemeTopYs();
    },
    methods: {
      getDetail() {
        getDetail(this.merchantId, this.productId).then(res => {
          // console.log(res);
          this.images = res.images;
          this.goods = new Goods(res);
          this.shop = new Shop(res);
        })
      },
      titleClick(index) {
        // console.log(index);
        this.$refs.scroll.scrollTo(0, this.themeTopYs[index], 500);
      },
      getThemeTopYs() {
        this.themeTopYs = [];
        this.themeTopYs.push(0);
        this.themeTopYs.push(-this.$refs.params.$el.offsetTop);
        this.themeTopYs.push(-this.$refs.comment.$el.offsetTop);
        this.themeTopYs.push(-this.$refs.recommend.$el.offsetTop);
        // console.log(this.themeTopYs);
      },
      contentScroll(position) {
        // console.log(position);
        let positionY = position.y;
        let length = this.themeTopYs.length;
        for (let i = 0; i < length; i++) {
          if (this.currentIndex != i && (i < length - 1 && positionY <= this.themeTopYs[i] && positionY > this.themeTopYs[i + 1]) ||
            (i == length - 1 && positionY <= this.themeTopYs[i])) {
             this.currentIndex = i;
             this.$refs.nav.currentIndex = this.currentIndex;
          }
        }

      }
    }

  }
</script>

<style scoped="scoped">
  .detail {
    height: 100vh;
  }

  .scroll {
    height: calc(100vh - 44px);
    overflow: hidden;
  }
</style>
